
<template>
	<view>
		<u-navbar title-size="34" title="设置" back-icon-color="#292940"  title-color="#292940" :border-bottom="false" :custom-back="goBack" placeholder></u-navbar>
		<view class="container" v-if="USER">
			<view class="avatar-box">
				<view class="d-flex justify-content-between setting-list user-info setting-border"  @click="uploadAvatar">
					<view>
						<view class="text-343A40 fz-34 mb-2">头像</view>
					</view>
					<view class="d-flex justify-content-right align-items-center">
						<view class="avatar-icon">
							<image :src="USER.avatar || $avatar"  mode="aspectFill"></image>
						</view>
						<view class="arrow-icon">
							<image src='/static/setting/arrow-icon.png'></image>
						</view>
					</view>
				</view>
			</view>
			<view class="avatar-box">
				<view class="d-flex justify-content-between setting-list" @tap="toNickname">
					<view class="text-343A40 fz-34">昵称</view>
					<view class="d-flex justify-content-right">
						<view class="text-292940 fz-30">{{USER.nickname}}</view> 
						<view class="arrow-icon">
							<image src='/static/setting/arrow-icon.png'></image>
						</view>
					</view>
				</view>
			</view>
			
			<view class="btn-box" v-if="USER">
				<u-button type="default" hover-class="none" @click="show = true" class="family-sc text-666978 fz-36 logOut">退出登录</u-button>
			</view>
		</view>
		<u-modal v-model="show" ref="uModal" :async-close="true" :content="content" show-cancel-button @cancel="show=false" @confirm="confirm" confirmColor="#00C0FF"></u-modal>
	</view>
</template>

<script>
	import ossUpload from '@/common/ossutil/uploadFile.js';
	export default{
		data(){
			return{
				show:false,
				content:'确定退出登录?',
				avatarImg: ''
			}
		},
		computed: {
			USER(){
				return this.$store.state.auth.USER
			}
		},
		methods:{
			//修改头像
			uploadAvatar(){
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (tempRes) => {
						let fileType = ''
						let blobUrl = ''
						// #ifdef H5
						//网页端获取文件类型
						fileType = tempRes.tempFiles[0].name.substring(tempRes.tempFiles[0].name.lastIndexOf(".") + 1);
						// #endif
						//获取上传文件blob地址
						blobUrl = tempRes.tempFilePaths[0]
						ossUpload(blobUrl, fileType, result => {
							this.avatarImg = result
							this.userUpdate()
						})
					}
				})
			},
			goBack(){
				uni.switchTab({
					url:'/pages/tabBars/mine'
				})
			},
			confirm(){
				this.logout()
			},
			//退出登录
			logout(){
				this.$store.dispatch('auth/logout').then(res=>{
					this.$refs.uModal.clearLoading()
					this.$store.commit('auth/LOGIN_OUT')
					this.$store.commit('auth/SET_USER',null)
					this.$store.commit('user/SET_ALBUMLIST',[])
					this.$store.commit('wallet/SET_WALLET',[])
					uni.reLaunch({
						url:'/pages/tabBars/home'
					})
				}).catch(error=>{
					this.$refs.uModal.clearLoading()
				})
			},
			//修改登录密码
			toEditPwd(){
				if(this.USER.has_password){
					uni.navigateTo({
						url:'/pages/setting/edit-password'
					})
				}else{
					uni.navigateTo({
						url:'/pages/setting/setPassword?isSetting'
					})
				}
			},
			//修改绑定手机号
			toPhone(){
				uni.navigateTo({
					url:'/pages/setting/bindPhone'
				})
			},
			toVerified(){
				uni.navigateTo({
					url:'/pages/setting/verified'
				})
			},
			toShow(){
				uni.navigateTo({
					url:'/pages/setting/show'
				})
			},
			//修改昵称或头像
			userUpdate() {
				this.$store.dispatch('user/userUpdate', { avatar: this.avatarImg }).then(res => {
					this.tui.getUserInfo()
				})
			},
			toNickname(){
				uni.navigateTo({
					url:'/pages/setting/nickname'
				})
			},
			toCapital(){
				uni.navigateTo({
					url:'/pages/setting/capital-password'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.primary {
	  color: red;
	}
	
	.warning {
	  color: red;
	}
	
	.success {
	  color:red;
	}
	
	.error {
	  color: red;
	}
	
	.info {
	  color: red;
	}
	.container {
		width: 100%;
		height:calc( 100vh - 44px );
		box-sizing: border-box;
		background-color: #FFFFFF;
	}
	.avatar-box{
		width: 100%;
		background-color: #fff;
		padding: 0 30upx;
		box-sizing: border-box;

		.setting-list{
			width: 100%;
			height: 120upx;
			align-items: center;
		
			.setting-right{
				height: 120upx;
				align-items: center;
				span{
					display: inline-block;
					width: 12upx;
					height: 12upx;
					background: #FF4D4F;
					border-radius: 100%;
					//margin-right: 10upx;
				}
				.user-name{
					font-size:30upx;
					color:#999999;
				}
			}
			.arrow-icon{
				width: 44upx;
				height: 44upx;
				margin-left: 10upx;
				image{
					width: 44upx;
					height: 44upx;
					vertical-align: top;
				}
			}
			/deep/.u-badge--dot{
				width: 12upx;
				height: 12upx;
				margin-top: 4upx;
			}
		
		}
		.user-info{
			height: 180upx;
		}
		.setting-border{
			border-bottom: 1upx solid rgba(216, 222, 228, .8);
		}
		.avatar-img{
			width: 98upx;
			height: 98upx;
				image{
					width: 98upx;
					height: 98upx;
					vertical-align: top;
				}
			
		}
	}
	.setting-margin{
		margin-bottom: 20upx;
	}
	.logOut{
		// background: #F5F5F6;;
		color: #fff;
		background: #292940;
	}
	.btn-box{
		position: fixed;
		width: 100%;
		box-sizing: border-box;
		bottom: 20upx;
		padding: 0 30upx;
		button {
			width: 100%;
			height: 98upx;
			border-radius: 50upx;
			line-height: 98upx;
			margin-bottom: 40upx;
		}
		
		uni-button:after {
			border: none !important;
		}	
	}
	.avatar-icon {
		width: 98upx;
		height: 98upx;
		border-radius: 100%;
	
		image {
			width: 98upx;
			height: 98upx;
			vertical-align: top;
			border-radius: 100%;
		}
	}

	
</style>
